<template>
  <section id="admin-login">

    <section class="container">
      <article class="header">
        <h4>{{ title }}</h4>
        <aside>
          <p>中山市技师学院世赛集训基地</p>
          <router-link to="">后台登录系统</router-link>
        </aside>
      </article>
      <section>
        <a-form
            id="components-form-demo-normal-login"
            class="login-form"
            :model="formState"
            @submit="handleSubmit"
        >
          <a-form-item class="email-group" ref="email" name="email">
            <a-input v-model:value="formState.email" placeholder="邮箱"/>
          </a-form-item>
          <a-form-item class="password-group" ref="password" name="password">
            <a-input-password v-model:value="formState.password" placeholder="密码"/>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" class="login-form-button">
              登录
              <a-spin :indicator="indicator" :spinning="spinning"/>
            </a-button>
          </a-form-item>
        </a-form>
      </section>
      <article class="footer">
        <hr>
        <aside>
          <router-link to="">忘记密码 ？</router-link>
        </aside>
      </article>
    </section>
  </section>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, reactive, toRefs, toRaw, onMounted, h} from 'vue'
import {message} from 'ant-design-vue';
import {LoadingOutlined} from '@ant-design/icons-vue';
import $store from '@/store'
import router from "@/router";

export default defineComponent({
  name: "login",
  setup() {
    const formState = reactive({
      email: "",
      password: "",
      type: 1
    })
    const {proxy} = getCurrentInstance()
    const emailPattern = /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/
    const spinning = ref(false);
    let title = ref("欢迎回来")
    const indicator = h(LoadingOutlined, {
      style: {
        fontSize: '18px',
        color: "#fff"
      },
      spin: true,
    });

    const handleSubmit = () => {
      if (formState.email.trim() === "") {
        message.warn("邮箱不能为空")
        return false
      }

      if (!emailPattern.test(formState.email.trim())) {
        console.log(1);
        message.warn("请输入正确的邮箱或密码")
        return false
      }

      if (formState.password.trim() === "") {
        message.warn("密码不能为空")
        return false
      }
      spinning.value = true
      proxy.$request("post", "/api/v1/login/admin/email", formState).then(res => {
        if (res.code === 200) {
          message.success(res.msg)
          proxy.$cookie.setCookie('user', res.data, 7200)
          $store.commit("setTokens", res.data.token)
          proxy.$request("get", "/api/v1/role/route", {type: 1}).then(res => {
            $store.commit("setUserInfo", Object.assign({isLogin: true}, res.data))
            setTimeout(() => {
              router.push("/backstage")
            }, 500)
          })
        } else {
          message.error("账号或密码输入错误")
        }
        spinning.value = false
      }).catch(err => {
        message.error("登录失败")
        spinning.value = false
      })
    }

    onMounted(() => {
      localStorage.removeItem("firstEntry")
      if (sessionStorage.getItem("title")) {
        title.value = sessionStorage.getItem("title")
      }
      $store.commit("setUserInfo", "")
      proxy.$cookie.clearCookie("user")
      sessionStorage.clear()

      localStorage.setItem("firstEntry", 1)
    })

    return {
      formState,
      handleSubmit,
      indicator,
      spinning,
      title
    }
  }
})
</script>

<style lang="less">
#app, #admin-login {
  width: 100%;
  height: 100%;
}

#admin-login {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #313131;
  font-family: "PingFang SC-Regular, PingFang SC";


  @keyframes buling {
    0%,
    100% {
      transform: scale(1, 1);
    }

    25%,
    75% {
      transform: scale(0.9, 1.1);
    }

    50% {
      transform: scale(1.1, 0.9);
    }
  }


  .container {
    width: 378px;
    transform: translateY(-100px);
  }

  .header {
    transform: translateY(-10px);
  }

  .header h4 {
    font-size: 30px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 35px;
  }

  .header aside {
    display: flex;
    letter-spacing: 0.5px;
  }

  .header aside p {
    font-weight: 500;
    color: #8B8B8B;
    line-height: 18px;
    font-family: "PingFang SC-Medium, PingFang SC";
  }

  .header aside a {
    margin-left: 4px;
    font-weight: 500;
    color: #6777EF;
    line-height: 18px;
  }

  .ant-form-item {
    margin-bottom: 16px !important;
  }

  .email-group, .password-group {
    width: 378px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.5s;
  }

  .email-group .ant-input:hover, .password-group .ant-input-password:hover, .login-form-button:hover {
    animation: buling 1s ease-in-out;
  }

  .email-group .ant-input-group-addon, .password-group .ant-input-group-addon {
    padding: 0 24px !important;
    background: none;
    color: #fff;
    border: none;
  }

  .password-group .ant-input {
    width: 100%;
    height: 100%;
  }

  .email-group .ant-input, .password-group .ant-input, .password-group .ant-input-password {
    background: none;
    border: none !important;
    color: #fff;
  }

  .email-group .ant-input, .password-group .ant-input-password {
    perspective: 100px;
    height: 54px;
    border-radius: 10px;
    background: #272727;
  }

  .password-group .ant-input-password-icon {
    transform: translateX(-10px);
    color: #d9d9d9;
    font-size: 18px;
  }

  .ant-btn-primary {
    width: 378px;
    height: 54px;
    background: #6777EF;
    border-radius: 10px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 16px;
    font-size: 14px;
  }

  .login-form-button {
    position: relative;
  }

  .login-form-button .ant-spin {
    position: absolute;
    top: 50%;
    right: 35%;
    transform: translate(-50%, -50%);
  }

  .footer {
    transform: translateY(20px);
  }

  .footer hr {
    position: relative;
    border-color: #8B8B8B;
  }

  .footer hr::after {
    content: "暂无其他登录方法";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    color: #8B8B8B;
    line-height: 18px;
    font-size: 15px;
    background: #313131;
    padding: 0 10px;
  }

  .footer aside {
    transform: translateY(13px);
  }

  .footer a {
    color: #6777EF;
  }
}
</style>
